<markdown>
# 菜单
</markdown>

<template>
  <x-dropdown trigger="hover">
    <x-button>Hover me</x-button>
    <template #popup>
      <x-menu :options="menus" mode="vertical" style="width: auto" @click="onClick" />
    </template>
  </x-dropdown>
</template>

<script setup>
import { h } from 'vue'
import { Icon, Message } from 'x-ui-vue3'

function renderIcon(icon) {
  return () => h(Icon, { type: icon })
}

const menus = [
  { label: '个人中心', value: 'my', icon: renderIcon('my') },
  {
    label: '推荐',
    value: 'recommend',
    icon: renderIcon('recommend'),
    children: [
      { label: '《擅长捉弄的高木同学》', value: '高木同学' },
      { label: '《魔女之旅》', value: '魔女' }
    ]
  },
  { label: '分区', value: 'fenqu', icon: renderIcon('fenqu'), disabled: true },
  { label: '动态', value: 'dongtai', icon: renderIcon('dongtai') },
  { label: '追番', value: 'zhuifan', icon: renderIcon('zhuifan') }
]

function onClick(item) {
  Message.info('你点击了 ' + item.label)
}
</script>
